<template>
	<!-- 编辑地址页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					编辑地址
				<view  class="loa_hui">删除</view>
			</view>
		</view>
		</view>
		<view style="background-color: #fff;">
		<view class="label label2" style="margin-top:10rpx;">
			<view class="label_left">
				收货人
			</view>
			<view class="label_right">
				<input type="text" placeholder="请输入收货人" class="input_as"  adjust-position="false"/>
			</view>
		</view>
		<view class="label label2">
			<view class="label_left">
				联系电话
			</view>
			<view class="label_right">
				<input type="tel" placeholder="请输入联系电话" class="input_as"  adjust-position="false"/>
			</view>
		</view>
		<view class="label label2">
			<view class="label_left">
				所在地区
			</view>
			<view class="label_right">
				<input type="text" placeholder="请选择所在地区" class="input_as"  adjust-position="false" disabled="dis
				" @click="addressShow = true" :value="address"/>
			</view>
		</view>
		<view class="label label2">
			<view class="label_left">
				详细地址
			</view>
			<view class="label_right">
				<input type="text" placeholder="街道，楼牌号等" class="input_as"  adjust-position="false"/>
			</view>
		</view>
		<view class="label label2">
			<view class="label_left" style="white-space: nowrap;">
				设置默认地址
			</view>
			<view class="label_right">
				<switch @change="switch2Change" color="#ff80c0"/>
			</view>
		</view>
		</view>
		
		<view class="bao_btn">保存地址</view>
		<!-- 地址组件 -->
		<pickerAddress v-model="addressShow" @confirm="addresspick" />
		<!-- 侧边栏 -->
		<!-- <fixce></fixce> -->
		<!-- 回到顶部start -->
	<!-- 	<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image> -->
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import pickerAddress from '../../component/address/index.vue'; //地址组件
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce,
		pickerAddress
		},
		data (){
			return{
				topState:false,
				addressShow: false,
				   form: {   //地址
				                    province: '',
				                    city: '',
				                    area: '',
				                },
				                address: ''
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			 switch2Change: function (e) {
			            console.log('switch2 发生 change 事件，携带值为', e.target.value)
			        },
			    addresspick(obj) {
			                let arr = [ 'province', 'city', 'area'];
			                let place = '';
			                arr.map(key => {
			                    this.form[key] = obj[key].AreaId
			                    place += obj[key].AreaName
			                })
			                this.address = place
			            },
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.label{
		width:95%;
		padding:25rpx 0;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom:2rpx solid #ededed;
		margin:0 auto;
	}
	.label_left{
		display: flex;
		justify-content:flex-start;
		align-items: center;
		color:#666;
		font-size:28rpx;
	}
	.label_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.tou_img{
		border-radius: 100rpx;
		width:100rpx;	
	}
	.btimg{
		width:30rpx;
		margin-left:5rpx;
	}
	.label2 .label_left{
		width:23%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.smstart{
		color:red;
		font-size:30rpx;
	}
	.label2 .label_right{
		width:80%;
	}
	.input_as{
		display: inline-block;
		width:100%;
		color:#000;
		text-indent: 20rpx;
	}
	.label2_right_sm{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#666;
	}
	.uni-input-input{
		font-size: 30rpx!important;
	}
	.bao_btn{
		    background: #ff80c0;
		    color: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width:90%;
			height:80rpx;
			margin:50rpx auto 0;
			font-size:30rpx;
	}
	.getma{
		    color: #666;
		    border: 2rpx solid #666;
			border-radius: 10rpx;
			padding:10rpx 15rpx;
			white-space: nowrap;
	}
</style>
